<html lang=zh-cmn-Hans>
<head>
	
    
	<title>George Guo的网站</title>
	<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@1.1.4/lib/p5.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<link rel="stylesheet" href="style.css">
	<!-- <script language="javascript" type="text/javascript" src="sketch.js"></script> -->

</head>
<body>
	<header>
		<h1 style="display: none;">分享你的问答 </h1>
		<h1 >建设中····································</h1>
	</header>
	 <nav>
		<div id="container" class="wrapper">
			<ul>
				<li><a href="index.html">主页</a></li>
				<li><a href="myaccount.html">我的</a></li>
				<li><a href="subpage.html">问卷</a></li>
				<li><a href="secretpage.html">分享</a></li>
			</ul>			
		</div>
		
	 </nav>
	 
	 <script src='p5sound.js'></script>
	 <!-- <nav id="wrapper"> -->
		<script>
		// 	let song;
		// 	function preload(){
		// 	song = loadSound('/beat.mp3')
		//   }
		// //   var myGif = null;
		// // var gifLink = "halloween.gif";
		
		// function setup() {
			
		//   soundFormats('mp3', 'ogg');
		  
		//   createCanvas(900, 200,500,300);
		  
		//   background(255, 0, 0);
		  
		//   song.play()
		// }
		// $(document).ready(function(){
		// // 	function draw() {
		// //     push();
		// //   translate(350,350);
		// //   myGif = p5Gif.loadGif(gifLink, function(){
		// //         this.loop(); //It will loop at the default position (0, 0)
		// //     		console.log(this.delay);
		// //       	//this.filter('gray');
		// //     });
		// //   pop();
		// // }
			
		// function mousePressed() {
		//   if (song.isPlaying()) {
		// 	// .isPlaying() returns a boolean
		// 	song.stop();
		// 	background(255, 0, 0);
		//   } else {
		// 	song.play();
		// 	background(0, 255, 0);
		//   }
		// }
		// })
		</script>
	<!-- </nav> -->
	 <script>
		 
	 function setup() {
		createCanvas(710, 400, WEBGL);
	  }
	  
	  function draw() {
		background(250);
		rotateY(frameCount * 0.01);
	  
		for (let j = 0; j < 5; j++) {
		  push();
		  for (let i = 0; i < 80; i++) {
			translate(
			  sin(frameCount * 0.001 + j) * 100,
			  sin(frameCount * 0.001 + j) * 100,
			  i * 0.1
			);
			rotateZ(frameCount * 0.002);
			push();
			sphere(8, 6, 4);
			pop();
		  }
		  pop();
		}
	  }





	let noise;
let fft;
let filter, filterFreq, filterWidth;

function setup() {
  createCanvas(900, 600);
  fill(255, 40, 255);

  filter = new p5.BandPass();

  noise = new p5.Noise();

  noise.disconnect(); // Disconnect soundfile from master output...
  filter.process(noise); // ...and connect to filter so we'll only hear BandPass.
  noise.start();

  fft = new p5.FFT();
}

function draw() {
  background(30);

  // Map mouseX to a bandpass freq from the FFT spectrum range: 10Hz - 22050Hz
  filterFreq = map(mouseX, 0, width, 10, 22050);
  // Map mouseY to resonance/width
  filterWidth = map(mouseY, 0, height, 0, 90);
  // set filter parameters
  filter.set(filterFreq, filterWidth);

  // Draw every value in the FFT spectrum analysis where
  // x = lowest (10Hz) to highest (22050Hz) frequencies,
  // h = energy / amplitude at that frequency
  let spectrum = fft.analyze();
  noStroke();
  for (let i = 0; i < spectrum.length; i++) {
    let x = map(i, 0, spectrum.length, 0, width);
    let h = -height + map(spectrum[i], 0, 255, height, 0);
    rect(x, height, width / spectrum.length, h);
  }
}

	  </script>
</body>
</html>
